{extend name="template/base_default"}
{block name="header"}


<!--<link rel="stylesheet" href="__CSS__/common.css">-->
<link rel="stylesheet" href="__CSS__/index.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<link rel="stylesheet" href="__CSS__/weui.min.css">
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<script type="text/javascript" src="__JS__/public.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
        margin: auto;
    }
    li{
        list-style:none;
    }
    .store-box{
        filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
        -moz-opacity:0.5; /*Firefox私有，透明度50%*/
        opacity:0.5;/*其他，透明度50%*/
        height:130px;
        margin-top: 30px;
    }
    .store-box img {
        width:100px;
        height:100px;
        float:right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .store-success{
        font-size: 18px;
        color:#545454;
        font-family: "Microsoft YaHei UI";
    }
    .store-text{
        float: left;
        margin-top: 30px;
        margin-left: 16px;
        text-align: left;
    }
    .store-detail{
        font-size: 14px;
        color:#8c8c8c;
        font-family: "Microsoft YaHei UI";
        margin-top: 12px;
    }
    .store-p{
        text-align: center;
        color:white;
        margin-top: 30px;
        font-family: "Microsoft YaHei UI";
        font-size: 18px;

    }
    .store-other{
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        height:90px;
        background-color: white;
        border-radius: 10px;
        width:90%;
        background-color: white;
        color:#545454;
    }
    .store-other-img{
        width:60px;
        float: left;
        height:60px;
        margin-top: 14px;
        margin-left: 14px;

    }
    .store-other-right{
        float: left;
        margin-left: 10px;

        width:65%;
        height:90px;
        margin-top: 14px;
    }
    .store-other-right-p1{
        font-family: "Microsoft YaHei UI";
        color:#545454;
        font-size: 18px;
        text-align: left;
    }
    .store-other-right-p2{
        font-family: "Microsoft YaHei UI";
        color:#c09853;
        font-size: 16px;
        text-align: left;
        margin-top: 6px;
        overflow: hidden;
    }
    .store-other-right-p3{
        font-family: "Microsoft YaHei UI";
        color:#8c8c8c;
        font-size: 14px;
        text-align: left;
        margin-top: 6px;
    }
    .searchbar{
        height:50px;
        margin-top:10px;
        width:100%;
    }
    .place{
        float:left;
        color:white;
        font-size: 16px;
        font-family: "Microsoft YaHei UI";
        margin-left: 28px;
        margin-top: 14px;

    }
    .search{
        width:74%;
        float:right;
        margin-right: 18px;
        border-radius: 40px;
        background-color: white;
        height:40px;
        margin-top: 8px;
        -moz-opacity:0.8; /*Firefox私有，透明度50%*/
        opacity:0.8;/*其他，透明度50%*/
        filter:alpha(opacity=80);

    }
    input{
        border:none;
        font-size: 18px;
        outline:none;
        margin-top: 8px;
        color:#545454;
    }
    .shopimg{
        width:90%;
        height:260px;
        border-radius: 20px;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        overflow: hidden;
    }
    .shopimg{
        width:90%;
        height:260px;
        border-radius: 20px;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        overflow: hidden;
    }
    .board{
        height:300px;
        border-radius: 20px;
        background-color: white;
        width:90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        overflow: hidden;
    }
    .board img{
        width:100%;
        height:180px;
    }
    .board-left{
        color:#545454;
        float:left;
        width:70%;
        height:60px;
        text-align: left;
        padding-left:10px;
        overflow: hidden;
    }
    .board-left p{
        color:#8c8c8c;
        font-size: 12px;
        overflow: hidden;
        height: 20px;
    }
    .board-right{
        width:20%;
        float: left;
    }
    .button{
        width:60px;
        height:30px;
        background-color: #00a0e9;
        text-align: center;
        margin-top: 6px;
        margin-left: 6px;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
    }
    .board-right img{
        width:30px;
        height:30px;
    }
    .star{
        font-size: 18px;
        color:#aa7700;
    }
    a:visited{
        text-decoration: none;
        color:white;
    }
    .detail{
        display: flex;
        flex-direction:column;
    }
</style>
{/block}
{block name="body"}
    <div class="board">
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                {volist name="main_img" id="pic"}
                <div class="swiper-slide"><img src="__BASE__/index.php/picture/index?id={$pic}"></div>
                {/volist}
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!--<img src="__BASE__/index.php/picture/index?id={$detail['seller']['main_img']}">-->
        <div class="board-left">
            <p style="font-size: 16px;color:#545454;overflow: hidden">{$detail['seller']['name']}</p>
            <p style="margin-top: 6px;line-height: 20px"><span class="star">
                {switch name="detail['seller']['grade']"}
                    {case value="1" break="0或1"}★☆☆☆☆{/case}
                    {case value="2" break="0或1"}★★☆☆☆{/case}
                    {case value="3" break="0或1"}★★★☆☆{/case}
                    {case value="4" break="0或1"}★★★★☆{/case}
                    {case value="5" break="0或1"}★★★★★{/case}
                {/switch}
            </span>人均：<span>{$detail['seller']['price']/100}</span>元/人</p>
        </div>
        <hr style="float: left;margin-top: 40px">
        <div class="board-right">
            <a style="color:white" href="{:url('shop/pay',array('seller_id'=>$detail['seller']['id'],'seller_name'=>$detail['seller']['name']))}"> <div class="button">
                付款
            </div></a>
        </div>
        <a href="http://api.map.baidu.com/marker?location={$detail['seller']['lat']},{$detail['seller']['lng']}&title={$detail['seller']['position']}&content={$detail['seller']['name']}&output=html&src=有车有保">
        <div class="board-left">

                <p style="font-size: 14px;color:#8c8c8c">{$detail['seller']['position']}</p>
        </div>
        </a>
        <hr style="float: left;margin-top: 40px">
        <a href="tel:{$detail.seller.contact_number}">
        <div class="board-right">
           <img src="__IMG__/phone.png">
        </div>
        </a>
    </div>
    {volist name="detail['promotion']" id='vo'}
        <div class="store-other">
            <img class="store-other-img" src="__BASE__/index.php/picture/index?id={$vo['img']}">
            <div class="store-other-right">
                <p class="store-other-right-p1">{$vo.title}</p>
                <p class="store-other-right-p2"><span style="color:#545454;">{$vo.detail}</span></p>

            </div>
        </div>
{/volist}

{/block}
{block name="footer"}
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="__JS__/swiper.min.js"></script>
<script>
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
    });
</script>
<script>

</script>
{/block}